<template>
	<div class="spec-many-type">
		<!--规格属性-->
		<div class="spec-wrap">
			<template v-if="form.model.spec_many">
				<div class="mb16 min-spc" :key="index" v-for="(attr, index) in form.model.spec_many.spec_attr">
					<div class="spec-hd">
						<div class="input-box">{{ attr.group_name }}</div>
						<a href="javascript:void(0);" @click="onDeleteGroup(index)">
							<el-icon>
								<Delete />
							</el-icon>
						</a>
					</div>
					<div class="spec-bd">
						<div class="item" v-for="(items, i) in attr.spec_items" :key="i">
							<el-tag closable @close="onDeleteValue(index, i)">{{
								items.spec_value
							}}</el-tag>
						</div>
						<div class="item">
							<el-input size="small" v-model="attr.tempValue" placeholder="请输入规格值" style="width: 160px"></el-input>
						</div>
						<div class="item">
							<el-button size="small" @click="onSubmitAddValue(attr)"
								:loading="attr.loading">添加</el-button>
						</div>
					</div>
				</div>
			</template>

			<!--添加规格-->
			<div v-if="!form.isSpecLocked">
				<el-button size="small" v-show="showAddGroupBtn" @click="onToggleAddGroupForm">
					<el-icon>
						<CirclePlusFilled />
					</el-icon>
					添加规格</el-button>
			</div>
			<!--规格列表-->
			<div class="add-spec mb16" v-show="!showAddGroupBtn">
				<div class="from-box">
					<div class="item">
						<span class="key">规格名：</span>
						<el-input size="small" v-model="addGroupFrom.specName" placeholder="请输入规格名称"></el-input>
					</div>
					<div class="item">
						<span class="key">规格值：</span>
						<el-input size="small" v-model="addGroupFrom.specValue" placeholder="请输入规格值"></el-input>
					</div>
					<el-button type="primary" size="small" :loading="groupLoading" @click="onSubmitAddGroup"
						plain>确定</el-button>
					<el-button size="small" @click="onToggleAddGroupForm">取消</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { addSpec, addSpecValue } from "@/api/product.js";
export default {
	data() {
		return {
			/*显示添加规格组按钮*/
			showAddGroupBtn: true,
			/*显示添加规格组表单*/
			showAddGroupForm: false,
			/*新增规格组值*/
			addGroupFrom: {
				specName: "",
				specValue: "",
			},
			groupLoading: false,
		};
	},
	inject: ["form"],
	created() {
		/*获取列表*/
		if (
			this.form.model.spec_many &&
			this.form.model.spec_many.spec_list.length > 0
		) {
			this.buildSkulist();
		}
	},
	methods: {
		/*显示/隐藏添加规则组 */
		onToggleAddGroupForm: function () {
			this.showAddGroupBtn = !this.showAddGroupBtn;
			this.showAddGroupForm = !this.showAddGroupForm;
		},

		/*表单提交：新增规格组 */
		onSubmitAddGroup: function () {
			let self = this;
			if (
				self.addGroupFrom.specName === "" ||
				self.addGroupFrom.specValue === ""
			) {
				ElMessage("请填写规则名或规则值");
				return false;
			}
			// 添加到数据库
			self.groupLoading = true;
			let Params = {
				spec_name: self.addGroupFrom.specName,
				spec_value: self.addGroupFrom.specValue,
			};
			addSpec(Params)
				.then((res) => {
					self.groupLoading = false;
					console.log(self.addGroupFrom);
					console.log("+++++++++++++++++++++");
					console.log(self.form.model.spec_many);
					console.log("-------------------");
					if (!self.form.model.spec_many) {
						self.form.model.spec_many = {
							spec_many: [],
							spec_attr: [],
						};
					}
					console.log(self.form.model.spec_many.spec_attr);
					// 记录规格数据
					self.form.model.spec_many.spec_attr.push({
						group_id: res.data.spec_id,
						group_name: self.addGroupFrom.specName,
						spec_items: [
							{
								item_id: res.data.spec_value_id,
								spec_value: self.addGroupFrom.specValue,
							},
						],
						tempValue: "",
						loading: false,
					});
					// 清空输入内容
					self.addGroupFrom.specName = "";
					self.addGroupFrom.specValue = "";
					console.log(self.form.model.spec_many.spec_attr);
					console.log(111);
					// 隐藏添加规则组
					self.onToggleAddGroupForm();
					console.log(222);
					// 构建规格组合列表
					self.buildSkulist();
				})
				.catch(() => {
					self.groupLoading = false;
				});
		},

		/*新增规格值*/
		onSubmitAddValue: function (specAttr) {
			let self = this;
			if (!specAttr.hasOwnProperty("tempValue") || specAttr.tempValue === "") {
				ElMessage("规格值不能为空");
				return false;
			}
			// 添加到数据库
			specAttr.loading = true;
			let Params = {
				spec_id: specAttr.group_id,
				spec_value: specAttr.tempValue,
			};
			addSpecValue(Params, true)
				.then((data) => {
					specAttr.loading = false;
					// 记录规格数据
					specAttr.spec_items.push({
						item_id: data.data["spec_value_id"],
						spec_value: specAttr.tempValue,
					});
					// 清空输入内容
					specAttr.tempValue = "";
					// 构建规格组合列表
					self.buildSkulist();
				})
				.catch(() => {
					specAttr.loading = false;
				});
		},

		/*构建规格组合列表*/
		buildSkulist: function () {
			console.log("buildSkulist");
			let self = this;
			if (!self.form.model.spec_many) {
				self.form.model.spec_many = {
					spec_attr: [],
				};
			}
			console.log(333333333);
			let spec_attr = self.form.model.spec_many.spec_attr;
			let specArr = [];
			for (let i = 0; i < spec_attr.length; i++) {
				specArr.push(spec_attr[i].spec_items);
			}

			let specListTemp = self.calcDescartes(specArr);
			console.log(444444444);
			let specList = [];
			for (let i = 0; i < specListTemp.length; i++) {
				let rows = [];
				let specSkuIdAttr = [];
				if (!Array.isArray(specListTemp[i])) {
					rows.push(specListTemp[i]);
				} else {
					rows = specListTemp[i];
				}
				for (let j = 0; j < rows.length; j++) {
					specSkuIdAttr.push(rows[j].item_id);
				}
				specList.push({
					product_sku_id: 0,
					spec_sku_id: specSkuIdAttr.join("_"),
					rows: rows,
					spec_form: {
						unlimit:'0',
					},
				});
			}
			console.log(5555555555);
			console.log(specList.length);
			console.log(self.form.model.spec_many);
			// 合并旧sku数据
			if (
				self.form.model.spec_many.spec_list &&
				self.form.model.spec_many.spec_list.length > 0 &&
				specList.length > 0
			) {
				console.log(self.form.model.spec_many.spec_list.length);
				for (let i = 0; i < specList.length; i++) {
					let overlap = self.form.model.spec_many.spec_list.filter(function (
						val
					) {
						return val.spec_sku_id === specList[i].spec_sku_id;
					});
					console.log(overlap);
					if (overlap.length > 0) {
						specList[i].spec_form = overlap[0].spec_form;
						specList[i].product_sku_id = overlap[0].product_sku_id;
					}
				}
			}
			console.log(66666666);
			self.form.model.spec_many.spec_list = specList;
			console.log(self.form.model.spec_many.spec_list);
		},

		/*规格组合*/
		calcDescartes: function (array) {
			if (array.length < 2) return array[0] || [];
			return [].reduce.call(array, function (col, set) {
				let res = [];
				col.forEach(function (c) {
					set.forEach(function (s) {
						let t = [].concat(Array.isArray(c) ? c : [c]);
						t.push(s);
						res.push(t);
					});
				});
				return res;
			});
		},

		/*删除规格组事件*/
		onDeleteGroup: function (index) {
			var self = this;
			ElMessageBox.confirm("删除后不可恢复，确认删除该记录吗?", "提示", {
				type: "warning",
			}).then(() => {
				// 删除指定规则组
				self.form.model.spec_many.spec_attr.splice(index, 1);
				// 构建规格组合列表
				self.buildSkulist();
			});
		},

		/*删除规格值值事件*/
		onDeleteValue: function (index, itemIndex) {
			let self = this;

			if (self.form.isSpecLocked) {
				ElMessage({
					message: "本商品正在参加活动，不能删除规格！",
					type: "warning",
				});
				return;
			}

			ElMessageBox.confirm("删除后不可恢复，确认删除该记录吗?", "提示", {
				type: "warning",
			}).then(() => {
				// 删除指定规则组
				self.form.model.spec_many.spec_attr[index].spec_items.splice(
					itemIndex,
					1
				);
				// 构建规格组合列表
				self.buildSkulist();
			});
		},
	},
};
</script>

<style scoped="scoped">
::v-deep(.spec-wrap .el-tag) {
	padding: 0 10px !important;
	height: 32px !important;
}

.spec-many-type {
	margin-left: 180px;
	margin-top: 16px;
	padding: 20px;
	border: 1px solid #e5ecf4;
	background: #f6f9fc;
}

.spec-wrap .spec-hd {
	padding: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	font-weight: bold;
}

.spec-wrap .spec-hd .el-icon-delete-solid {
	font-size: 16px;
	color: #4b1794;
}

.spec-wrap .min-spc {
	border: 1px solid #dfecf8;
}

.spec-wrap .spec-bd {
	padding: 5px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	border-top: 1px solid #dfecf8;
	background: #ffffff;
}

.spec-wrap .spec-bd .el-tag {
	color: #333333;
}

.spec-wrap .spec-bd .item {
	position: relative;
	padding: 5px;
}

.spec-wrap .spec-bd .item input {
	padding-right: 30px;
}

.spec-wrap .spec-hd a,
.spec-wrap .spec-hd .svg-icon,
.spec-wrap .spec-bd .item .svg-icon {
	display: block;
	width: 16px;
	height: 16px;
}

.spec-wrap .spec-bd .item a {
	position: absolute;
	top: 6px;
	right: 5px;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.add-spec .from-box {
	display: flex;
	justify-content: flex-start;
}

.add-spec .item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 200px;
	margin-right: 20px;
}

.add-spec .item .key {
	display: block;
	white-space: nowrap;
}
</style>
